<template>
    <view>
        <!-- 头部 -->
        <navber id="head-navber" :navbarData="navbarData"></navber>
        <view class="order-item">
            <view class="order-item-head">
                <view class="order-item-time">下单时间：{{ order.create_date }}</view>
                <view class="order-item-status-div">
                    <view :class="'order-item-status order-item-status-' + order.status_class">
                        {{ order.order_status_name }}
                    </view>
                </view>
            </view>

            <view class="order-item-layer" v-for="(itemx, index) in order.items" :key="index">
                <view class="cart-goods-item-selected" @tap="item_select($event, { index })" :data-index="index">
                    <image :src="imgUrl + '/imgs/cart/' + (itemx.selected ? '' : 'not_') + 'select.png'"></image>
                </view>

                <view class="order-item-img" @tap="goodsDetail($event, { goods_id: itemx.goods_id })" :data-goods_id="itemx.goods_id">
                    <image mode="" :src="itemx.goods_img"></image>
                </view>

                <view class="order-item-info">
                    <view class="order-item-info-title" @tap="goodsDetail($event, { goods_id: itemx.goods_id })" :data-goods_id="itemx.goods_id">{{ itemx.goods_title }}</view>
                    <view class="order-item-info-pn">
                        <view class="order-item-info-pn-price">
                            <span class="tip">¥</span>
                            {{ itemx.goods_price }}
                        </view>
                        <view class="order-item-info-pn-number">
                            <span class="tip">X</span>
                            {{ itemx.goods_number }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-info-div-price">
                <view class="order-fx">
                    <view>
                        合计：
                        <span>¥{{ all_goods.order_total }}</span>
                    </view>
                </view>
                <view class="order-total">
                    <view>
                        共
                        <span>{{ all_goods.goods_number }}</span>
                        件商品
                    </view>
                </view>
            </view>
        </view>
        <view class="order-item">
            <view class="order-item-one">
                <view class="out-type-title">退款类型：</view>
                <view class="out-type-select">
                    <view class="out-type-item" @tap="onItemSelectType($event, { type: '1' })" data-type="1">
                        <view :class="'order-type-selected-lable ' + (out_type == 1 ? 'selected' : '')">仅退款</view>
                    </view>
                    <view class="out-type-item right-item" @tap="onItemSelectType($event, { type: '2' })" data-type="2">
                        <view :class="'order-type-selected-lable ' + (out_type == 2 ? 'selected' : '')">退货退款</view>
                    </view>
                </view>
            </view>
            <view class="order-item-one" style="padding: 15rpx 0" v-if="out_type == 2">
                <view class="out-type-title">快递公司：</view>
                <view class="out-type-select" style="text-align: right">
                    <view class="logistics-name">
                        <picker @change="onLogisticsChange" :value="logistics_index" :range="logisticsArray">
                            <view class="picker">
                                {{ logisticsObj[logistics_index].logistics_name }}
                            </view>
                        </picker>
                    </view>
                    <view class="logistics-right-icon">
                        <image :src="imgUrl + '/imgs/goods-right.png'"></image>
                    </view>
                </view>
            </view>
            <view class="order-item-one" v-if="out_type == 2">
                <view class="out-type-title">物流单号：</view>
                <view class="out-type-select">
                    <input class="logistics-number" placeholder="请输入物流单号" @input="inputNumber" />
                </view>
            </view>
            <view class="order-item-one">
                <view class="order-msg-title">
                    <view class="order-msg-title-tip">退款原因：</view>
                </view>
                <view class="order-msg-input">
                    <view class="order-msg-input-text">
                        <textarea placeholder="选填，请填写您的退款原因" @input="inputOutExplain"></textarea>
                    </view>
                </view>
            </view>
        </view>
        <view class="end"></view>
        <view class="but-submit">
            <view class="add" @tap="outOrder">
                <span class="add-text">提交</span>
            </view>
        </view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';
const Config = require('../../../../config/index.js');

const Api = require('../../../../api/index.js');

export default {
    components: {
        navber
    },
    data() {
        return {
            navbarData: {
                title: '申请退款' //顶部标题
            },
            //导航栏
            imgUrl: Config.imgUrl,
            //图片url
            order: {
                create_date: '',
                status_class: '',
                order_status_name: '',
                items: []
            },
            //订单详情
            order_item_id: [],
            order_id: '',
            all_goods: {
                order_total: 0,
                goods_number: 0
            },
            out_type: 1,
            //退款类型 1仅退款 2退款退货
            logistics_name: '中通快递',
            //物流名称
            logistics_code: 'stc',
            //物流名称
            logistics_number: '',
            //物流单号
            out_explain: '',
            //退款说明
            logistics_index: 0,
            logisticsArray: ['申通快递', '百世快递', '中通快递'],
            logisticsObj: [
                {
                    logistics_code: 'STO',
                    logistics_name: '申通快递'
                },
                {
                    logistics_code: 'HTKY',
                    logistics_name: '百世快递'
                },
                {
                    logistics_code: 'ZTO',
                    logistics_name: '中通快递'
                }
            ]
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var id = options.id;
        this.setData({
            order_id: id
        });
        this.orderDetail(id);
        this.getLogisticsList();
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.orderDetail(this.order_id);
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        onLogisticsChange(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            this.setData({
                logistics_index: e.detail.value
            });
        },

        onItemSelectType(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            var type = e.currentTarget.dataset.type;
            this.setData({
                out_type: parseInt(type)
            });
        },

        item_select(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            var index = e.currentTarget.dataset.index;
            var order = this.order;
            order.items[index].selected = !order.items[index].selected;
            var items = order.items;
            var order_ids = [];
            var order_total = 0;
            var goods_number = 0;
            items.forEach((item) => {
                if (item.selected) {
                    order_ids.push(item.id);
                    order_total += parseFloat(item.order_total);
                    goods_number += parseInt(item.goods_number);
                }
            });
            var all_goods = {
                order_total: order_total,
                goods_number: goods_number
            };
            this.setData({
                order: order,
                all_goods: all_goods,
                order_item_id: order_ids
            });
        },

        //备注输入
        inputOutExplain(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            this.setData({
                out_explain: e.detail.value
            });
        },

        //物流单号
        inputNumber(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            this.setData({
                logistics_number: e.detail.value
            });
        },

        outOrder(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            var order_item_id = this.order_item_id;
            var out_explain = this.out_explain;

            if (order_item_id == null || order_item_id.length == 0) {
                uni.showToast({
                    title: '请选择需要退款的商品',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }

            if (out_explain == null || out_explain == '') {
                uni.showToast({
                    title: '请选填写退款说明',
                    icon: 'none',
                    duration: 2000
                });
                return;
            } //申请退货/退款

            var json = {
                order_id: this.order.id,
                type: 'out',
                order_item_ids: order_item_id.join(','),
                out_explain: out_explain,
                out_type: this.out_type
            };
            uni.showModal({
                title: '提示',
                content: '确认申请退款退货吗',

                success(res) {
                    if (res.confirm) {
                        Api.userOutOrder(json).then((res) => {
                            if (res.code == 1) {
                                uni.showToast({
                                    title: '提款申请提交成功',
                                    icon: 'none',
                                    duration: 2000
                                });
                                setTimeout(function () {
                                    uni.navigateBack();
                                }, 1500);
                            }
                        });
                    }
                }
            });
        },

        orderDetail(id) {
            // 订单详情
            var json = {
                id: id,
                type: 'out'
            };
            Api.userOrderDetail(json).then((res) => {
                if (res.code == 1) {
                    var data = res.data;
                    this.setData({
                        order: data
                    });
                } else {
                    uni.showToast({
                        title: '订单信息有误',
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        },

        getLogisticsList() {
            Api.userLogisticsList().then((res) => {
                if (res.code == 1) {
                    var data = res.data;
                    var data_arr = [];
                    data.forEach((element) => {
                        data_arr.push(element.logistics_name);
                    });
                    this.setData({
                        logisticsArray: data_arr,
                        logisticsObj: data
                    }); // console.log(data)
                } else {
                    uni.showToast({
                        title: '暂无物流信息',
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        },

        goodsDetail(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            console.log('占位：函数 goodsDetail 未声明');
        }
    }
};
</script>
<style>
@import './index.css';
</style>
